<template>
    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @select="menuSelect" @openChange="openChange" :forceSubMenuRender="true" :openKeys="openKeys">
        <menu-render :menu-data="userMenus" :dirMenuFlag="dirMenuFlag"/>

    </a-menu>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, ref} from "vue";
import loginStore from "@/store/login/login-store";
import type {UserMenus} from "@/store/login/types";
import menuRender from './menu-render.vue';
import router from "@/configs/routers/routers";
import {pathMapToMenu} from "@/utils/map-menus";

const dirMenuFlag = ref<string>("dir:");
const selectedKeys = ref<string[]>([""])
let store = loginStore();

const vueInstance = getCurrentInstance()?.proxy;

const userMenus:UserMenus[] = [...store.userMenus];

const openKeys = ref<string[]>([])

onMounted(() => {
    if (vueInstance){
        selectedKeys.value.push(vueInstance?.$route.path);
    }
    pathMapToMenu(store.userMenus, vueInstance?.$route.path, undefined, openKeys.value)
})

const menuSelect = ({ item, key, selectedKeys } :any) => {
    if (!key.toString().startsWith(dirMenuFlag.value)){
        router.push(key)
    }
}

const openChange = (openKs: string[]) => {
    console.log(openKs)
}
</script>

<style scoped lang="less">

</style>
